<template>
    <div class="blank-box" v-if="props.topicList">
        <div class="paragraph">
            <span v-for="(list, index) in props.topicList" class="paragraph-list" :key="index">
                <span v-html="list.topicName"></span
                ><label style="font-weight: bold; font-size: 0.87rem; color: black">
                    {{ list.orderNum }}
                </label>
                <template v-if="props.showAnswer && props.topicList.length > index + 1">
                    <span v-if="list.isRight === 1" class="answer isBlue">{{
                        list.userAnswer
                    }}</span>
                    <span v-else>
                        <label class="answer isRed">{{
                            list.userAnswer ? list.userAnswer : '未作答'
                        }}</label>
                        <label class="isBlue">({{ formatAnswer(list.rightAnswer) }})</label>
                    </span>
                    <template v-if="list.haveAnalysis || list.haveLocation">
                        <topic-analysis
                            :btn="{position: list.haveLocation, analysis: list.haveAnalysis}"
                            :part-id="partId"
                            :topic-id="list.topicId"
                            :topic-type="topicType"
                            :exam-id="examId"
                            @to-position="(val) => emit('to-position', val)"
                            @popup-show="(val) => emit('popup-show', val)"
                        />
                    </template>
                </template>
                <span class="black-input-box" v-else-if="props.topicList.length > index + 1">
                    <span class="black-box">
                        <input
                            type="text"
                            style="
                                border: none;
                                outline: none;
                                border-radius: 0;
                                text-align: center;
                                width: 90px;
                                background-color: transparent;
                            "
                            v-model="list.userAnswer"
                            @keyup="change(index)"
                            maxlength="60"
                            @keydown="keydown($event)"
                            @focus="inputFocus($event, list.orderNum)"
                            spellcheck="false"
                            ref="topicDom"
                            :data-orderNum="list.orderNum"
                            :data-topic="list.topicId"
                            @blur="inputBlur($event, list.topicId, list.userAnswer)" />
                    </span>
                </span>
            </span>
        </div>
        <!--
            :data-groupkey='groupkey'
                                   :data-groupType='groupType'
        -->
    </div>
</template>

<script setup>
import topicAnalysis from './topicAnalysis.vue'
const props = defineProps(['topicList', 'showAnswer', 'partId', 'topicType', 'examId'])

const emit = defineEmits(['inputBlue', 'inputFocus', 'to-position', 'popup-show'])

// 输入框内容变更
function change(index) {
    // console.log(index)
}

// 输入框键盘按下
function keydown(event) {
    // console.log(event.keyCode)
}

// 输入框获取焦点
function inputFocus(evnet) {
    emit('inputFocus', evnet)
}

// 输入框失去焦点
function inputBlur(event, topicId, answer) {
    const paramAnswer = {
        topicId: topicId,
        userAnswer: answer ? answer.trim() : ''
    }
    emit('inputBlue', paramAnswer)
}

function formatAnswer(answer) {
    return answer.replaceAll('@', '/').replaceAll('#', '，')
}
</script>

<style scoped lang="scss">
.blank-box {
    .paragraph {
        .paragraph-list {
            line-height: 30px;
            font-size: 16px;

            .black-input-box {
                display: inline-block;
                width: 90px;
                height: 30px;
                line-height: 30px;
                margin: 0 5px;

                .black-box {
                    display: inline-block;
                    width: 90px;
                    height: 30px;
                    line-height: 30px;
                    position: relative;
                    border-bottom: 1px solid #000000 !important;
                    bottom: -2px;
                    input {
                        width: 100%;
                        height: 30px;
                        border: none;
                        color: #000;
                        outline: none;
                        display: inline-block;
                        position: absolute;
                        left: 0;
                        top: 3px;
                        text-align: center;
                    }
                }
            }
        }
    }
}
b {
    font-weight: bold !important;
}

/* 显示答案的样式 */
.answer {
    font-size: 0.933rem;
    padding: 0 5px;
    border-bottom: 1px solid #000;
}
.isBlue {
    color: #0590ff;
}
.isRed {
    color: #fd453d;
}
</style>
